import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/homeList/geoMetry'
    },
    {
      path: '/homePage',
      name: 'homePage',
      component: () => import('../views/homePage.vue')
    },
    {
      path: '/home',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/homeList',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/HomePage.vue'),
      children:[
        {
          path: '/homeList/geoMetry',
          name: 'geoMetry',
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import('../views/page/Geometry.vue')
        },
        {
          path: '/homeList/car',
          name: 'car',
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import('../views/page/car.vue')
        },
        {
          path: '/homeList/axes',
          name: 'axes',
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import('../views/page/Axes.vue')
        },
        {
          path: '/homeList/group',
          name: 'group',
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import('../views/page/group.vue')
        },
        {
          path: '/homeList/table',
          name: 'table',
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import('../views/page/table.vue')
        },

        {
          path: '/homeList/light',
          name: 'light',
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import('../views/page/light.vue')
        },

        {
          path: '/homeList/light2',
          name: 'light2',
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import('../views/page/light2shadow.vue')
        },

        {
          path: '/homeList/road',
          name: 'road',
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import('../views/page/road.vue')
        },

        {
          path: '/homeList/texture',
          name: 'texture',
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import('../views/page/texture.vue')
        },

        
        {
          path: '/homeList/areatexture',
          name: 'areatexture',
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import('../views/page/areatexture.vue')
        },

        {
          path: '/homeList/scenery',
          name: 'scenery',
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import('../views/page/scenery.vue')
        },

        {
          path: '/cardScene',
          name: 'cardScene',
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import('../views/page/cardScene.vue')
        },
      ]
    },
  ]
})

export default router
